<template>
  <div class="container">
    <div class="title">答题基本信息</div>
    <div class="asnwerType">
      答题类型：{{
        this.detailInfo.matchType == 1 ? "企业匹配" : "个体工商户匹配"
      }}
    </div>
    <div class="title">答题记录保存</div>
    <el-table
      :border="true"
      size="mini"
      v-loading="listLoading"
      :data="tableData"
    >
      <el-table-column
        label="编号"
        width="60"
        align="center"
        type="index"
      ></el-table-column>
      <el-table-column align="center" label="题目" prop="label" />
      <el-table-column align="center" label="条件" prop="conditions" />
      <el-table-column align="center" label="用户选项" prop="label">
        <template slot-scope="scope">
          <p v-for="item in scope.row.answers">{{ item.label }}</p>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="对应条件"
        prop="formItem.dataIndex"
      >
        <template slot-scope="scope">
          <p v-for="item in scope.row.answers">{{ item.value }}</p>
        </template></el-table-column
      >
    </el-table>
  </div>
</template>
<script>
import { getAnswerSheetDetail } from "@/api/customer";
export default {
  props: {
    detailInfo: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      listLoading: false,
      tableData: [],
      valueEnum: {
        EQ: "=",
        NO: "",
        LT: "<",
        LE: "<=",
      },
    };
  },
  async mounted() {
    let params = {
      matchId: this.detailInfo.id,
      matchType: this.detailInfo.matchType,
    };
    let res = await getAnswerSheetDetail(params); 
    this.tableData = res.data.map((item) => {
      item.answers.map((answer) => { 
        if (this.isValidJSON(answer.value)) {
          let data = JSON.parse(answer.value);
          if (data&&Array.isArray(data)) { 
            answer.value = data.map((valueitem) => {
              return `${valueitem.leftValue || ""}${
                this.valueEnum[valueitem.leftOp]
              }${valueitem.un}${this.valueEnum[valueitem.rightOp]||""}${
                valueitem.rightValue || ""
              }`;
            });
          }else{
            answer.value=[answer.value]
          }
        } else{
          answer.value=[answer.value]
        }
        return answer;
      });
      return item;
    });
  },
  methods: {
    isValidJSON(text) {
      try {
        JSON.parse(text);
        return true;
      } catch (error) {
        return false;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.container {
  padding: 0 2px;
  .title {
    color: #000;
    padding-left: 10px;
    position: relative;
    margin-bottom: 10px;
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      left: 0;
      width: 4px;
      height: 14px;
      border-radius: 5px;
      background-color: rgb(55, 147, 238);
    }
  }
  .asnwerType {
    box-shadow: 0 0.02rem 0.37rem 0 #efefef;
    padding: 20px;
    box-sizing: border-box;
    font-size: 18px;
    margin-bottom: 15px;
    color: #000;
  }
}
</style>
